<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">下载</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="download-content">
        <!-- 应用信息 -->
        <div class="app-info">
          <div class="app-logo">
            <Icon icon="mdi:swap-horizontal-circle" class="logo-icon" />
          </div>
          <div class="app-name">置换宝</div>
          <div class="app-platforms">
            <span class="platform-tag">android</span>
            <span class="platform-tag">iOS</span>
          </div>
        </div>

        <!-- 平台选择 -->
        <div class="platform-section">
          <div class="platform-title">选择平台下载</div>
          <div class="platform-buttons">
            <button
              class="platform-btn android"
              :class="{ active: activePlatform === 'android' }"
              @click="activePlatform = 'android'"
            >
              <Icon icon="mdi:android" class="platform-icon" />
              <span>Android下载</span>
            </button>
            <button
              class="platform-btn ios"
              :class="{ active: activePlatform === 'ios' }"
              @click="activePlatform = 'ios'"
            >
              <Icon icon="mdi:apple" class="platform-icon" />
              <span>iOS下载</span>
            </button>
          </div>
        </div>
      </div>

        <!-- 二维码区域 -->
        <div class="qrcode-section">
          <div class="qrcode-title">{{ activePlatform === 'android' ? 'Android' : 'IOS' }}下载二维码</div>
          <div class="qrcode-container">
            <img :src="activePlatform === 'android' ? androidQrcodeImage : iosQrcodeImage" alt="Android下载二维码" class="qrcode-image" />
          </div>
        </div>

        <!-- 复制下载地址 -->
        <div class="copy-section">
          <button
            class="copy-btn"
            :class="{ 'copied': isCopied }"
            @click="copyDownloadUrl"
          >
            {{ copyButtonText }}
          </button>
        </div>

      <!-- 复制成功提示 -->
      <div v-if="showCopySuccess" class="copy-success-message">
        <Icon icon="mdi:check-circle" class="success-icon" />
        <span>链接已复制到剪贴板</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'DownloadPage',
  components: {
    Icon
  },
  data() {
    return {
      activePlatform: 'android',
      androidDownloadUrl: 'https://www.zhihuanbao.com/android/latest.apk',
      iosDownloadUrl: 'https://www.zhihuanbao.com/ios/latest.apk',
      isCopied: false,
      showCopySuccess: false,
      androidQrcodeImage: require('../../../assets/images/ios_download.png'),
      iosQrcodeImage: require('../../../assets/images/android_download.png')
    }
  },
  computed: {
    copyButtonText() {
      return this.isCopied ? '已复制下载地址' : '复制下载地址'
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    async copyDownloadUrl() {
      try {
        await navigator.clipboard.writeText(this.downloadUrl)
        this.isCopied = true
        this.showCopySuccess = true

        // 3秒后重置复制状态
        setTimeout(() => {
          this.isCopied = false
          this.showCopySuccess = false
        }, 3000)
      } catch (err) {
        // 降级方案
        const textArea = document.createElement('textarea')
        textArea.value = this.downloadUrl
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)

        this.isCopied = true
        this.showCopySuccess = true

        setTimeout(() => {
          this.isCopied = false
          this.showCopySuccess = false
        }, 3000)
      }
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

/* 下载内容样式 */
.download-content {
  flex: 1;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 应用信息样式 */
.app-info {
  text-align: center;
  margin-bottom: 40px;
}

.app-logo {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.logo-icon {
  font-size: 40px;
  color: white;
}

.app-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.app-platforms {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.platform-tag {
  padding: 4px 12px;
  background: #f0f2ff;
  color: #667eea;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 二维码区域样式 */
.qrcode-section {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.qrcode-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.qrcode-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding: 16px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.qrcode-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 复制区域样式 */
.copy-section {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 40px;
}

.copy-btn {
  width: 100%;
  padding: 12px 20px;
  background: #667eea;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.copy-btn:hover {
  background: #5a6fd8;
}

.copy-btn.copied {
  background: #07C160;
}

/* 平台选择样式 */
.platform-section {
  width: 100%;
}

.platform-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.platform-buttons {
  display: flex;
  gap: 12px;
}

.platform-btn {
  flex: 1;
  padding: 16px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.platform-btn:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.platform-btn.active {
  border-color: #667eea;
  background: #f0f2ff;
  color: #667eea;
}

.platform-icon {
  font-size: 20px;
}

.platform-btn.android.active .platform-icon {
  color: #3DDC84;
}

.platform-btn.ios.active .platform-icon {
  color: #000;
}

/* 复制成功提示 */
.copy-success-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  z-index: 1000;
  animation: fadeInOut 3s ease-in-out;
}

.success-icon {
  color: #07C160;
  font-size: 16px;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  10%, 90% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .platform-buttons {
    flex-direction: column;
  }
}
</style>
